<!-- 这里还是一个标准的BUI页面 -->
<div class="bui-page">
    <header class="bui-bar">
        <div class="bui-bar-left">
            <a class="bui-btn btn-back"><i class="icon-back"></i></a>
        </div>
        <div class="bui-bar-main">单页路由-option</div>
        <div class="bui-bar-right"></div>
    </header>
    <main>
        <h3 class="section-title">页面跳转效果</h3>
        <ul class="bui-list">
            <li class="bui-btn bui-box btn-load-effect" data-effect="push" >
                <div class="span1">默认 push</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box btn-load-effect" data-effect="none" >
                <div class="span1">不要切换效果 none</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box btn-load-effect" data-effect="cover" >
                <div class="span1">遮罩切换效果 cover</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box btn-load-effect" data-effect="slide" >
                <div class="span1">滑动切换效果 slide</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box btn-load-effect" data-effect="zoom" >
                <div class="span1">放大切换效果 zoom</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box btn-load-effect" data-effect="fadein" >
                <div class="span1">渐隐渐显切换效果 fadein</div>
                <i class="icon-listright"></i>
            </li>
            <li class="bui-btn bui-box btn-load-effect" data-effect="fadeinslide" >
                <div class="span1">渐隐滑动切换效果 fadeinslide</div>
                <i class="icon-listright"></i>
            </li>
        </ul>
    </main>
</div>
